@charset "UTF-8";

@import '~scss/themes/index.scss';

/*

  1. ui-align-vertical(利用“精灵元素” 垂直对齐)
    借助于伪元素before将父元素的高度设置为 100%;然后再设置自身的 vertical-align属性来进行垂直的居中 、底部对齐

    方式： 父元素设置.ui-align-vertical, 对齐元素本身设置 [.ui-align-vertical-middle|.ui-align-vertical-bottom]
    <div class="ui-align-vertical" >
      <div class="ui-align-vertical-middle">
        
      </div>
    </div>

    examples:
    1.1. 
    <div class="ui-align-vertical" style="height: 150px;">
      <div class="ui-align-vertical-middle">
        这个是居中对齐
      </div>
    </div>

    1.2.

    <div class="ui-align-vertical" style="height: 150px;">
      <div class="ui-align-vertical-bottom">
        这个是底部对齐
      </div>
    </div>
 */
.ui-align-vertical {
  font-size: 0;
  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  &__bottom,
  &__middle {
    display: inline-block;
    font-size: $font-size-base;
    max-width: 100%;
  }

  &__middle {
    vertical-align: middle;
  }
  &__bottom {
    vertical-align: bottom;
  }
}

/**
  2.ui-align-tramsform 未知宽高元素水平垂直居中

 方式： 对齐元素本身设置 [.ui-align-tramsform]
    <div class="parent" >
      <div class="ui-align-tramsform">
        
      </div>
    </div>

  examples:
    1.1. 
    <div class="parent" style="height: 150px;">
      <div class="ui-align-tramsform">
        水平垂直居中
      </div>
    </div>

  注意:
    1. 父元素需要事定位元素，不然其居中方式就会是按照第一个定位祖先元素的位置
    2. 当前元素脱落文档流

*/
.ui-align-tramsform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  &.ui-align-tramsform__v {
    left: auto;
    transform: translateY(0);
  }
  &.ui-align-tramsform__h {
    top: auto;
    transform: translateX(0);
  }
}
